<template>
  <div class="single-page-container">
    <div class="single-page-content">
      <!-- header -->
      <div class="header-box">
        <div class="time">更新时间：{{ update_time }}</div>
        <div class="button" @click="handleDetail">明细数据</div>
      </div>
      <!-- data -->
      <div class="data-box">
        <div class="item">
          <div class="value">{{ total }}条</div>
          <div class="name">当前商机</div>
        </div>
        <div class="item">
          <div class="value">{{ no_visit }}条</div>
          <div class="name">无人问津</div>
        </div>
      </div>
      <!-- tab -->
      <van-tabs @change="handleChange" background="#409EFF" color="#ffffff" title-active-color="#ffffff" title-inactive-color="#ffffff" class="tab-box" v-model="active">
        <van-tab title="热度统计">
          <heatStatistics :tabData="tabData[0]" />
        </van-tab>
        <van-tab title="行业分析">
          <industryAnalysis :tabData="tabData[1]" />
        </van-tab>
        <van-tab title="分类分析">
          <classificationAnalysis :tabData="tabData[2]" />
        </van-tab>
        <van-tab title="线索转化">
          <clueConversion :tabData="tabData[3]" @timeTab="handleTimeChange" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import heatStatistics from './components/heatStatistics'
import industryAnalysis from './components/industryAnalysis'
import classificationAnalysis from './components/classificationAnalysis'
import clueConversion from './components/clueConversion'
import { apiCountByDay } from '@/api/realTime/index'

export default {
  name: 'index',
  components: {
    heatStatistics,
    industryAnalysis,
    classificationAnalysis,
    clueConversion,
  },
  data() {
    return {
      active: 0,
      total: 0,
      no_visit: 0,
      update_time: '',
      tabData: [],
      clueType: 0,
    }
  },
  created() {},
  mounted() {
    this.getData()
  },
  methods: {
    // 获取数据
    getData() {
      const info = {
        tab_type: this.active + 1,
        clue_type: this.clueType + 1,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiCountByDay(formData).then((res) => {
        const { total, no_visit, update_time, data } = res.data
        this.total = total
        this.no_visit = no_visit
        this.update_time = update_time
        this.$set(this.tabData, this.active, data)
      })
    },
    // 明细数据
    handleDetail() {
      this.$toast('暂未开通')
    },
    // tab切换
    handleChange() {
      this.getData()
    },
    handleTimeChange(index) {
      this.clueType = index
      this.getData()
    },
  },
}
</script>

<style scoped lang="scss">
.single-page-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-size: 26rpx;
  color: #333333;
  background: #eff1f5;
}
.single-page-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.header-box {
  width: 100%;
  padding: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #ffffff;
  .time {
    font-size: 20rpx;
    color: #666666;
  }
  .button {
    height: 50rpx;
    padding: 0 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6rpx;
    background: #409eff;
    color: #ffffff;
    &.disable {
      background: #999999;
      color: #666666;
    }
  }
}
.data-box {
  width: 100%;
  padding: 32rpx 24rpx;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  .item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #409eff;
    &:last-child {
      border: none;
    }
    .value {
      font-size: 36rpx;
      font-weight: bold;
      color: #409eff;
    }
    .name {
      margin-top: 20rpx;
    }
  }
}
.tab-box {
  width: 100%;
  flex: 1 1 auto;
  margin-top: 20rpx;
}

::v-deep .van-tabs__line {
  bottom: 36rpx;
}
::v-deep .van-tab__pane {
  height: calc(100vh - 350rpx);
  background: #ffffff;
  overflow: hidden;
  overflow-y: scroll;
}
</style>
